﻿@page "/features/icons"
@using Microsoft.AspNetCore.Components.Web.Virtualization

<DocsPage>
    <DocsPageHeader Title="MudBlazor Icons" SubTitle="Over 1800 Material Design icons and a few custom ones." />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Icons" />
            <MudGrid Class="my-4">
                <MudItem xs="12" sm="8" md="10">
                    <MudTextField Immediate="true" DebounceInterval="1000" @bind-Value="SearchText" Variant="Variant.Outlined" Placeholder="Search icons..." Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" />
                </MudItem>
                <MudItem xs="12" sm="4" md="2">
                    <MudSelect T="IconOrigin" Value="SelectedIconOrigin" ValueChanged="OnSelectedValue" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
                        <MudSelectItem Value="IconOrigin.Custom">Custom Icons</MudSelectItem>
                        <MudSelectItem Value="IconOrigin.Material">Material Icons</MudSelectItem>
                    </MudSelect>
                </MudItem>
                <MudItem xs="12" Class="relative">
                    @if(SelectedIconOrigin == IconOrigin.Material)
                    {
                        <MudChipSet T="string" CheckMark>
                            <MudChip Default="true" Text="Filled" OnClick="@(() => ChangeIconCategory(IconType.Filled))" Variant="Variant.Outlined" Color="Color.Default" SelectedColor="Color.Primary" />
                            <MudChip Text="Outlined" OnClick="@(() => ChangeIconCategory(IconType.Outlined))" Variant="Variant.Outlined" Color="Color.Default" SelectedColor="Color.Primary" />
                            <MudChip Text="Rounded" OnClick="@(() => ChangeIconCategory(IconType.Rounded))" Variant="Variant.Outlined" Color="Color.Default" SelectedColor="Color.Primary" />
                            <MudChip Text="Sharp" OnClick="@(() => ChangeIconCategory(IconType.Sharp))" Variant="Variant.Outlined" Color="Color.Default" SelectedColor="Color.Primary" />
                            <MudChip Text="TwoTone" OnClick="@(() => ChangeIconCategory(IconType.TwoTone))" Variant="Variant.Outlined" Color="Color.Default" SelectedColor="Color.Primary" />
                        </MudChipSet>
                    }
                    else if(SelectedIconOrigin == IconOrigin.Custom)
                    {
                        <MudChipSet T="string" CheckMark>
                            <MudChip Default="true" Text="All" OnClick="@(() => ChangeIconCategory(IconType.All))" Variant="Variant.Outlined" Color="Color.Default" SelectedColor="Color.Primary" />
                            <MudChip Text="Brands" OnClick="@(() => ChangeIconCategory(IconType.Brands))" Variant="Variant.Outlined" Color="Color.Default" SelectedColor="Color.Primary" />
                            <MudChip Text="FileFormats" OnClick="@(() => ChangeIconCategory(IconType.FileFormats))" Variant="Variant.Outlined" Color="Color.Default" SelectedColor="Color.Primary" />
                            <MudChip Text="Uncategorized" OnClick="@(() => ChangeIconCategory(IconType.Uncategorized))" Variant="Variant.Outlined" Color="Color.Default" SelectedColor="Color.Primary" />
                        </MudChipSet>
                    }
                </MudItem>
            </MudGrid>
            
            <div class="relative">
                <div class="absolute" style="top:0px;width:100%;">
                    <div @ref="_killZone" style="@GetKillZoneStyle()"></div>
                </div>
                <Virtualize Items="@SelectedIcons" ItemSize="@IconCardHeight">
                    <div class="d-flex mud-width-full">
                        @foreach(var icon in context.RowIcons)
                        {
                            <button class="docs-icon-panel" @onclick="@(() => SetIconDrawer(icon))">
                                <MudIcon Icon="@icon.Code" Title="@icon.Name" />
                                <MudText Typo="Typo.caption">
                                    @icon.Name
                                </MudText>
                            </button>
                        }
                    </div>
                </Virtualize>
            </div>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>

<MudDrawer @bind-Open="@_iconDrawerOpen" ClipMode="DrawerClipMode.Always" Anchor="Anchor.End" Overlay="false" Elevation="0" Width="260px" Class="mud-icondrawer" Variant="@DrawerVariant.Temporary">
    <MudToolBar Dense="true" Gutters="false" Class="pl-4 py-8">
        <MudIcon Size="Size.Large" Icon="@SelectedIcon.Code" Class="mr-4"/>
        <MudText Typo="Typo.subtitle1">@SelectedIcon.Name</MudText>
        <MudSpacer/>
        <MudIconButton OnClick="@(() => CloseIconDrawer())" Icon="@Icons.Material.Filled.Close" Class="pa-2"></MudIconButton>
    </MudToolBar>
    <div class="px-4">
        <MudText Typo="Typo.subtitle2">Icon Code</MudText>
        <MudPaper Class="mud-iconcode pa-2" Elevation="0">
            @IconCodeOutput
            <div class="d-flex justify-end">
                <MudIconButton OnClick="CopyTextToClipboard" Icon="@Icons.Material.Filled.ContentCopy" Size="Size.Small" Class="pa-1 mb-n1 mr-n1" />
            </div>
        </MudPaper>
        <MudText Typo="Typo.subtitle2">Icon Preview</MudText>
        <MudPaper Class="d-flex justify-center align-center" Elevation="0" Height="228px">
            <MudIcon Size="@PreviewIconSize" Color="@PreviewIconColor" Icon="@SelectedIcon.Code" />
        </MudPaper>

        <MudSelect T="Color" @bind-Value="PreviewIconColor" Label="Color" Variant="Variant.Outlined" Dense="true" Margin="Margin.Dense" Class="my-4">
            <DocsColorSelect Color="Color.Dark" />
            <DocsColorSelect Color="Color.Default" />
            <DocsColorSelect Color="Color.Primary" />
            <DocsColorSelect Color="Color.Secondary" />
            <DocsColorSelect Color="Color.Tertiary" />
            <DocsColorSelect Color="Color.Info" />
            <DocsColorSelect Color="Color.Success" />
            <DocsColorSelect Color="Color.Warning" />
            <DocsColorSelect Color="Color.Error" />
        </MudSelect>
        <MudSelect T="Size" @bind-Value="PreviewIconSize" Label="Size" Variant="Variant.Outlined" Dense="true" Margin="Margin.Dense" Class="my-4">
            <MudSelectItem Value="Size.Small">Small</MudSelectItem>
            <MudSelectItem Value="Size.Medium">Medium</MudSelectItem>
            <MudSelectItem Value="Size.Large">Large</MudSelectItem>
        </MudSelect>
    </div>
</MudDrawer>